<template>
	<div class="category">
		<van-search v-model="searchValue"
					shape="round"
					placeholder="请输入搜索关键词"
					disabled
					@click="handleClickSearch" />

		<transition name="van-slide-right">
			<router-view></router-view>
		</transition>

		<div class="fenlei">
			<van-sidebar v-model="activeKey">
				<van-sidebar-item :title="item.text"
								  v-for="item in categoryList"
								  :key="item.id"
								  @click="tabClick(item.id)" />
			</van-sidebar>

			<ul class="category_content">
				<li>
          <img :src="currentCategory.banner_url" alt="">
          <h5>{{currentCategory.front_name}}</h5>
          <div>
            <span></span>
            <h3>{{currentCategory.name}}</h3>
          </div>
          <van-grid column-num="3">
            <van-grid-item v-for="item in currentCategory.subCategoryList" :icon="item.wap_banner_url" :text="item.name" />
          </van-grid>
        </li>
			</ul>

		</div>
	</div>
</template>

<script>
import { getCatalogList, getCategoryContent } from "@/network/api";
export default {
	name: "Category",
	created() {
		// 获取分类数据
		getCatalogList().then(res => {
			if (res.errno == 0) {
				// console.log(res);
				this.categoryList = res.data.categoryList
				const newArr = JSON.parse(JSON.stringify(this.categoryList).replace(/name/g, 'text'))
				this.categoryList = newArr
				this.currentCategory = res.data.currentCategory
        console.log(this.currentCategory);
			}
		})
	},
	data() {
		return {
			// 搜索框绑定数据
			searchValue: '',
			activeKey: 0,
			// 分类页左侧数组
			categoryList: [],
			// 分类页面数据
			currentCategory: {},

		}
	},
	methods: {
		handleClickSearch() {
			this.$router.push('/category/popup')
		},

    // 点击tab栏切换数据
		tabClick(id) {
			getCategoryContent(id).then(res => {
				if (res.errno == 0) {
					this.currentCategory = res.data.currentCategory
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.fenlei {
	width: 100%;
	background-color: #fff;
	height: 84vh;
	display: flex;
  .van-sidebar {
    width: 20%;
    background-color: #f7f8fa;
  }
}
.van-sidebar {
	width: 20%;
	height: 90vh !important;
	background-color: #fff;
}

.van-sidebar-item {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 20px 12px;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.category_content {
	width: 80%;
  height: 90vh;
  background-color: #fff;
  li {
    width: 95%;
    position: relative;
    top: .04rem;
    left: .08rem;
    height: 100%;
    img {
      border-radius: .05rem;
      box-shadow: 0 0 6px #000;
      filter: brightness(0.5);
      width: 100%;
      height: 1.4rem;
    }
    h5 {
      position: absolute;
      top: .63rem;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
    }
    div {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
}
.van-grid-item {
  height: .86rem !important;
}
</style>